<template>
  <div class="interviews-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">面试管理</h1>
        <p class="page-desc">管理面试安排，跟踪面试进度</p>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleScheduleInterview">
          <el-icon>
            <Plus />
          </el-icon>
          安排面试
        </el-button>
        <el-button type="success" @click="handleBatchSchedule" :disabled="selectedInterviews.length === 0">
          <el-icon>
            <Calendar />
          </el-icon>
          批量安排
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="12" :sm="6">
        <div class="stat-card total">
          <div class="stat-icon">
            <el-icon>
              <VideoCamera />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.total }}</div>
            <div class="stat-label">总面试数</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="6">
        <div class="stat-card today">
          <div class="stat-icon">
            <el-icon>
              <Clock />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.today }}</div>
            <div class="stat-label">今日面试</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="6">
        <div class="stat-card pending">
          <div class="stat-icon">
            <el-icon>
              <Warning />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.pending }}</div>
            <div class="stat-label">待面试</div>
          </div>
        </div>
      </el-col>

      <el-col :xs="12" :sm="6">
        <div class="stat-card completed">
          <div class="stat-icon">
            <el-icon>
              <Check />
            </el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.completed }}</div>
            <div class="stat-label">已完成</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 搜索筛选 -->
    <el-card class="search-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="候选人">
          <el-input v-model="searchForm.candidateName" placeholder="请输入候选人姓名" clearable style="width: 150px" />
        </el-form-item>

        <el-form-item label="职位">
          <el-select v-model="searchForm.jobId" placeholder="请选择职位" clearable filterable style="width: 200px">
            <el-option v-for="job in jobList" :key="job.id" :label="job.title" :value="job.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="面试状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
            <el-option label="待面试" value="scheduled" />
            <el-option label="进行中" value="in_progress" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="cancelled" />
            <el-option label="未到场" value="no_show" />
          </el-select>
        </el-form-item>

        <el-form-item label="面试轮次">
          <el-select v-model="searchForm.round" placeholder="请选择轮次" clearable style="width: 120px">
            <el-option label="一面" value="1" />
            <el-option label="二面" value="2" />
            <el-option label="三面" value="3" />
            <el-option label="终面" value="final" />
          </el-select>
        </el-form-item>

        <el-form-item label="面试官">
          <el-select v-model="searchForm.interviewerId" placeholder="请选择面试官" clearable style="width: 150px">
            <el-option v-for="interviewer in interviewerList" :key="interviewer.id" :label="interviewer.name"
              :value="interviewer.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="面试时间">
          <el-date-picker v-model="searchForm.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" style="width: 240px" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon>
              <Search />
            </el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon>
              <Refresh />
            </el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 面试列表 -->
    <el-card class="table-card">
      <el-table :data="tableData" v-loading="loading" stripe style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />

        <el-table-column prop="id" label="ID" width="80" />

        <!-- 候选人信息 -->
        <el-table-column label="候选人信息" min-width="180">
          <template #default="{ row }">
            <div class="candidate-info">
              <el-avatar :size="40" :src="row.candidateAvatar">
                <el-icon>
                  <User />
                </el-icon>
              </el-avatar>
              <div class="info-content">
                <div class="candidate-name">{{ row.candidateName }}</div>
                <div class="candidate-phone">{{ row.candidatePhone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 职位信息 -->
        <el-table-column label="应聘职位" min-width="150">
          <template #default="{ row }">
            <div class="job-info">
              <div class="job-title">{{ row.jobTitle }}</div>
              <div class="job-department">{{ row.department }}</div>
            </div>
          </template>
        </el-table-column>

        <!-- 面试轮次 -->
        <el-table-column label="面试轮次" width="100">
          <template #default="{ row }">
            <el-tag :type="getRoundTagType(row.round)">
              {{ getRoundText(row.round) }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 面试官 -->
        <el-table-column label="面试官" width="120">
          <template #default="{ row }">
            <div class="interviewer-info">
              <div class="interviewer-name">{{ row.interviewerName }}</div>
            </div>
          </template>
        </el-table-column>

        <!-- 面试时间 -->
        <el-table-column label="面试时间" width="180">
          <template #default="{ row }">
            <div class="interview-time">
              <div class="date">{{ formatDate(row.interviewTime) }}</div>
              <div class="time">{{ formatTime(row.interviewTime) }}</div>
            </div>
          </template>
        </el-table-column>

        <!-- 面试方式 -->
        <el-table-column label="面试方式" width="100">
          <template #default="{ row }">
            <el-tag :type="getTypeTagType(row.interviewType)" size="small">
              {{ getTypeText(row.interviewType) }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 面试状态 -->
        <el-table-column label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 评分 -->
        <el-table-column label="评分" width="100">
          <template #default="{ row }">
            <div v-if="row.score" class="score-info">
              <el-rate :model-value="row.score" disabled show-score text-color="#ff9900" score-template="{value}" />
            </div>
            <span v-else class="no-score">未评分</span>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleViewDetail(row)">
              <el-icon>
                <View />
              </el-icon>
              详情
            </el-button>
            <el-button v-if="row.status === 'scheduled'" type="warning" link @click="handleStartInterview(row)">
              <el-icon>
                <VideoPlay />
              </el-icon>
              开始
            </el-button>
            <el-button v-if="row.status === 'completed'" type="success" link @click="handleViewFeedback(row)">
              <el-icon>
                <Document />
              </el-icon>
              反馈
            </el-button>
            <el-dropdown @command="(command) => handleAction(command, row)">
              <el-button type="primary" link>
                更多
                <el-icon>
                  <ArrowDown />
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="edit" v-if="row.status === 'scheduled'">
                    <el-icon>
                      <Edit />
                    </el-icon>
                    编辑
                  </el-dropdown-item>
                  <el-dropdown-item command="reschedule" v-if="row.status === 'scheduled'">
                    <el-icon>
                      <Calendar />
                    </el-icon>
                    改期
                  </el-dropdown-item>
                  <el-dropdown-item command="cancel" v-if="row.status === 'scheduled'">
                    <el-icon>
                      <Close />
                    </el-icon>
                    取消
                  </el-dropdown-item>
                  <el-dropdown-item command="feedback" v-if="row.status === 'completed'">
                    <el-icon>
                      <EditPen />
                    </el-icon>
                    编辑反馈
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]" :total="pagination.total" layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 安排面试对话框 -->
    <el-dialog v-model="scheduleDialogVisible" title="安排面试" width="600px" @close="handleScheduleDialogClose">
      <el-form ref="scheduleFormRef" :model="scheduleForm" :rules="scheduleRules" label-width="100px">
        <el-form-item label="候选人" prop="candidateId">
          <el-select v-model="scheduleForm.candidateId" placeholder="请选择候选人" filterable style="width: 100%">
            <el-option v-for="candidate in candidateList" :key="candidate.id" :label="candidate.name"
              :value="candidate.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="应聘职位" prop="jobId">
          <el-select v-model="scheduleForm.jobId" placeholder="请选择职位" style="width: 100%">
            <el-option v-for="job in jobList" :key="job.id" :label="job.title" :value="job.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="面试轮次" prop="round">
          <el-select v-model="scheduleForm.round" placeholder="请选择轮次" style="width: 100%">
            <el-option label="一面" value="1" />
            <el-option label="二面" value="2" />
            <el-option label="三面" value="3" />
            <el-option label="终面" value="final" />
          </el-select>
        </el-form-item>

        <el-form-item label="面试官" prop="interviewerId">
          <el-select v-model="scheduleForm.interviewerId" placeholder="请选择面试官" style="width: 100%">
            <el-option v-for="interviewer in interviewerList" :key="interviewer.id" :label="interviewer.name"
              :value="interviewer.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="面试时间" prop="interviewTime">
          <el-date-picker v-model="scheduleForm.interviewTime" type="datetime" placeholder="请选择面试时间"
            style="width: 100%" />
        </el-form-item>

        <el-form-item label="面试方式" prop="interviewType">
          <el-radio-group v-model="scheduleForm.interviewType">
            <el-radio label="online">线上面试</el-radio>
            <el-radio label="offline">线下面试</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="面试地点" prop="location" v-if="scheduleForm.interviewType === 'offline'">
          <el-input v-model="scheduleForm.location" placeholder="请输入面试地点" />
        </el-form-item>

        <el-form-item label="会议链接" prop="meetingLink" v-if="scheduleForm.interviewType === 'online'">
          <el-input v-model="scheduleForm.meetingLink" placeholder="请输入会议链接" />
        </el-form-item>

        <el-form-item label="备注" prop="notes">
          <el-input v-model="scheduleForm.notes" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="scheduleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleScheduleSubmit" :loading="scheduleLoading">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 面试详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="面试详情" width="70%" @close="handleDetailDialogClose">
      <div v-if="currentInterview" class="interview-detail">
        <!-- 基本信息 -->
        <div class="detail-section">
          <h3>基本信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="候选人">{{ currentInterview.candidateName }}</el-descriptions-item>
            <el-descriptions-item label="应聘职位">{{ currentInterview.jobTitle }}</el-descriptions-item>
            <el-descriptions-item label="面试轮次">{{ getRoundText(currentInterview.round) }}</el-descriptions-item>
            <el-descriptions-item label="面试官">{{ currentInterview.interviewerName }}</el-descriptions-item>
            <el-descriptions-item label="面试时间">{{ formatDateTime(currentInterview.interviewTime)
              }}</el-descriptions-item>
            <el-descriptions-item label="面试方式">{{ getTypeText(currentInterview.interviewType) }}</el-descriptions-item>
            <el-descriptions-item label="面试地点/链接">{{ currentInterview.location || currentInterview.meetingLink || '-'
              }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{ getStatusText(currentInterview.status) }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 面试反馈 -->
        <div class="detail-section" v-if="currentInterview.status === 'completed'">
          <h3>面试反馈</h3>
          <div class="feedback-content">
            <div class="feedback-score">
              <span class="score-label">综合评分：</span>
              <el-rate :model-value="currentInterview.score" disabled show-score text-color="#ff9900"
                score-template="{value}分" />
            </div>
            <div class="feedback-text">
              <h4>面试评价</h4>
              <p>{{ currentInterview.feedback || '暂无评价' }}</p>
            </div>
            <div class="feedback-result">
              <h4>面试结果</h4>
              <el-tag :type="currentInterview.result === 'pass' ? 'success' : 'danger'">
                {{ currentInterview.result === 'pass' ? '通过' : '不通过' }}
              </el-tag>
            </div>
          </div>
        </div>

        <!-- 备注信息 -->
        <div class="detail-section" v-if="currentInterview.notes">
          <h3>备注信息</h3>
          <p>{{ currentInterview.notes }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  Calendar,
  VideoCamera,
  Clock,
  Warning,
  Check,
  Search,
  Refresh,
  User,
  View,
  VideoPlay,
  Document,
  ArrowDown,
  Edit,
  Close,
  EditPen
} from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const scheduleLoading = ref(false)
const scheduleDialogVisible = ref(false)
const detailDialogVisible = ref(false)
const scheduleFormRef = ref()
const selectedInterviews = ref<number[]>([])
const currentInterview = ref(null)

// 统计数据
const stats = ref({
  total: 89,
  today: 5,
  pending: 23,
  completed: 45
})

// 搜索表单
const searchForm = reactive({
  candidateName: '',
  jobId: null,
  status: '',
  round: '',
  interviewerId: null,
  dateRange: null
})

// 分页数据
const pagination = reactive({
  current: 1,
  size: 20,
  total: 0
})

// 安排面试表单
const scheduleForm = reactive({
  candidateId: null,
  jobId: null,
  round: '',
  interviewerId: null,
  interviewTime: null,
  interviewType: 'online',
  location: '',
  meetingLink: '',
  notes: ''
})

// 表单验证规则
const scheduleRules = {
  candidateId: [
    { required: true, message: '请选择候选人', trigger: 'change' }
  ],
  jobId: [
    { required: true, message: '请选择职位', trigger: 'change' }
  ],
  round: [
    { required: true, message: '请选择面试轮次', trigger: 'change' }
  ],
  interviewerId: [
    { required: true, message: '请选择面试官', trigger: 'change' }
  ],
  interviewTime: [
    { required: true, message: '请选择面试时间', trigger: 'change' }
  ],
  interviewType: [
    { required: true, message: '请选择面试方式', trigger: 'change' }
  ]
}

// 基础数据
const jobList = ref([
  { id: 1, title: 'Java开发工程师' },
  { id: 2, title: '前端开发工程师' },
  { id: 3, title: '产品经理' }
])

const interviewerList = ref([
  { id: 1, name: '张技术总监' },
  { id: 2, name: '李产品经理' },
  { id: 3, name: '王HR主管' }
])

const candidateList = ref([
  { id: 1, name: '张小明' },
  { id: 2, name: '李小红' },
  { id: 3, name: '王小强' }
])

// 面试数据
const tableData = ref([
  {
    id: 1,
    candidateName: '张小明',
    candidatePhone: '13800138001',
    candidateAvatar: '',
    jobTitle: 'Java开发工程师',
    department: '技术部',
    round: '1',
    interviewerName: '张技术总监',
    interviewTime: '2024-01-22T14:00:00',
    interviewType: 'online',
    status: 'scheduled',
    score: null,
    feedback: '',
    result: '',
    notes: '请提前5分钟进入会议室',
    meetingLink: 'https://meet.example.com/room/123'
  },
  {
    id: 2,
    candidateName: '李小红',
    candidatePhone: '13800138002',
    candidateAvatar: '',
    jobTitle: '前端开发工程师',
    department: '技术部',
    round: '2',
    interviewerName: '李产品经理',
    interviewTime: '2024-01-21T10:00:00',
    interviewType: 'offline',
    status: 'completed',
    score: 4,
    feedback: '技术能力较强，沟通表达清晰，团队协作意识良好。',
    result: 'pass',
    notes: '',
    location: '公司会议室A'
  }
])

// 方法定义

/**
 * 获取轮次标签类型
 */
const getRoundTagType = (round: string) => {
  const typeMap: Record<string, string> = {
    '1': 'primary',
    '2': 'success',
    '3': 'warning',
    'final': 'danger'
  }
  return typeMap[round] || 'info'
}

/**
 * 获取轮次文本
 */
const getRoundText = (round: string) => {
  const textMap: Record<string, string> = {
    '1': '一面',
    '2': '二面',
    '3': '三面',
    'final': '终面'
  }
  return textMap[round] || round
}

/**
 * 获取面试方式标签类型
 */
const getTypeTagType = (type: string) => {
  return type === 'online' ? 'primary' : 'success'
}

/**
 * 获取面试方式文本
 */
const getTypeText = (type: string) => {
  return type === 'online' ? '线上' : '线下'
}

/**
 * 获取状态标签类型
 */
const getStatusTagType = (status: string) => {
  const typeMap: Record<string, string> = {
    'scheduled': 'warning',
    'in_progress': 'primary',
    'completed': 'success',
    'cancelled': 'info',
    'no_show': 'danger'
  }
  return typeMap[status] || 'info'
}

/**
 * 获取状态文本
 */
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'scheduled': '待面试',
    'in_progress': '进行中',
    'completed': '已完成',
    'cancelled': '已取消',
    'no_show': '未到场'
  }
  return textMap[status] || status
}

/**
 * 格式化日期
 */
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}

/**
 * 格式化时间
 */
const formatTime = (dateString: string) => {
  return new Date(dateString).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

/**
 * 格式化日期时间
 */
const formatDateTime = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN')
}

/**
 * 搜索
 */
const handleSearch = () => {
  pagination.current = 1
  loadData()
}

/**
 * 重置搜索
 */
const handleReset = () => {
  Object.assign(searchForm, {
    candidateName: '',
    jobId: null,
    status: '',
    round: '',
    interviewerId: null,
    dateRange: null
  })
  handleSearch()
}

/**
 * 选择改变
 */
const handleSelectionChange = (selection: any[]) => {
  selectedInterviews.value = selection.map(item => item.id)
}

/**
 * 安排面试
 */
const handleScheduleInterview = () => {
  resetScheduleForm()
  scheduleDialogVisible.value = true
}

/**
 * 批量安排
 */
const handleBatchSchedule = () => {
  ElMessage.info('批量安排面试功能开发中')
}

/**
 * 查看详情
 */
const handleViewDetail = (row: any) => {
  currentInterview.value = row
  detailDialogVisible.value = true
}

/**
 * 开始面试
 */
const handleStartInterview = (row: any) => {
  ElMessageBox.confirm(
    '确定要开始面试吗？',
    '开始面试',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(() => {
    row.status = 'in_progress'
    ElMessage.success('面试已开始')
    // TODO: 调用API更新状态
  })
}

/**
 * 查看反馈
 */
const handleViewFeedback = (row: any) => {
  handleViewDetail(row)
}

/**
 * 处理操作
 */
const handleAction = (command: string, row: any) => {
  switch (command) {
    case 'edit':
      handleEdit(row)
      break
    case 'reschedule':
      handleReschedule(row)
      break
    case 'cancel':
      handleCancel(row)
      break
    case 'feedback':
      handleEditFeedback(row)
      break
  }
}

/**
 * 编辑面试
 */
const handleEdit = (row: any) => {
  ElMessage.info(`编辑面试：${row.candidateName}`)
  // TODO: 实现编辑功能
}

/**
 * 改期面试
 */
const handleReschedule = (row: any) => {
  ElMessage.info(`改期面试：${row.candidateName}`)
  // TODO: 实现改期功能
}

/**
 * 取消面试
 */
const handleCancel = (row: any) => {
  ElMessageBox.confirm(
    `确定要取消与「${row.candidateName}」的面试吗？`,
    '取消面试',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    row.status = 'cancelled'
    ElMessage.success('面试已取消')
    // TODO: 调用API更新状态
  })
}

/**
 * 编辑反馈
 */
const handleEditFeedback = (row: any) => {
  ElMessage.info(`编辑反馈：${row.candidateName}`)
  // TODO: 实现编辑反馈功能
}

/**
 * 安排面试提交
 */
const handleScheduleSubmit = async () => {
  try {
    await scheduleFormRef.value.validate()
    scheduleLoading.value = true

    // TODO: 调用API保存数据
    setTimeout(() => {
      scheduleLoading.value = false
      scheduleDialogVisible.value = false
      ElMessage.success('面试安排成功')
      loadData()
    }, 1000)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

/**
 * 安排面试对话框关闭
 */
const handleScheduleDialogClose = () => {
  resetScheduleForm()
}

/**
 * 详情对话框关闭
 */
const handleDetailDialogClose = () => {
  currentInterview.value = null
}

/**
 * 重置安排面试表单
 */
const resetScheduleForm = () => {
  Object.assign(scheduleForm, {
    candidateId: null,
    jobId: null,
    round: '',
    interviewerId: null,
    interviewTime: null,
    interviewType: 'online',
    location: '',
    meetingLink: '',
    notes: ''
  })
  scheduleFormRef.value?.clearValidate()
}

/**
 * 分页大小改变
 */
const handleSizeChange = (size: number) => {
  pagination.size = size
  loadData()
}

/**
 * 当前页改变
 */
const handleCurrentChange = (current: number) => {
  pagination.current = current
  loadData()
}

/**
 * 加载数据
 */
const loadData = () => {
  loading.value = true
  // TODO: 调用API获取数据
  setTimeout(() => {
    pagination.total = 89
    loading.value = false
  }, 500)
}

// 生命周期
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.interviews-management {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.header-right {
  display: flex;
  gap: 12px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px 0;
}

.page-desc {
  color: #909399;
  margin: 0;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  border-left: 4px solid;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card.total {
  border-left-color: #409eff;
}

.stat-card.today {
  border-left-color: #67c23a;
}

.stat-card.pending {
  border-left-color: #e6a23c;
}

.stat-card.completed {
  border-left-color: #f56c6c;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.total .stat-icon {
  background: #409eff;
}

.today .stat-icon {
  background: #67c23a;
}

.pending .stat-icon {
  background: #e6a23c;
}

.completed .stat-icon {
  background: #f56c6c;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.search-card {
  margin-bottom: 20px;
}

.table-card {
  border-radius: 8px;
}

.candidate-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-content {
  flex: 1;
}

.candidate-name {
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.candidate-phone {
  font-size: 12px;
  color: #909399;
}

.job-info {
  line-height: 1.5;
}

.job-title {
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
}

.job-department {
  font-size: 12px;
  color: #909399;
}

.interviewer-info {
  line-height: 1.5;
}

.interviewer-name {
  font-weight: 500;
  color: #303133;
}

.interview-time {
  line-height: 1.5;
}

.interview-time .date {
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
}

.interview-time .time {
  font-size: 12px;
  color: #909399;
}

.score-info {
  display: flex;
  align-items: center;
}

.no-score {
  color: #909399;
  font-size: 12px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.interview-detail {
  max-height: 60vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #303133;
  border-bottom: 2px solid #409eff;
  padding-bottom: 8px;
}

.feedback-content {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
}

.feedback-score {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.score-label {
  font-weight: 500;
  color: #303133;
}

.feedback-text,
.feedback-result {
  margin-bottom: 16px;
}

.feedback-text h4,
.feedback-result h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #303133;
}

.feedback-text p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
  }

  .header-right {
    align-self: stretch;
    justify-content: space-between;
  }

  .stats-row .el-col {
    margin-bottom: 12px;
  }
}
</style>
